<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--插值:让此处的文本内容和变量进行绑定,如果写在某个标签里面 会受标签显示效果影响-->
    {{info}}
    <b>{{info}}</b>
    <h1>{{info}}</h1>
</div>
<!--引入Vue框架文件-->
<!--<script src="https://cdn.staticfile.org/vue/3.3.4/vue.global.min.js"></script>-->
<!--引入本地框架文件-->
<script src="js/vue.js"></script>
<script>
    //实例化一个Vue对象
    let app = Vue.createApp({
        data() {  //和页面元素进行绑定的变量写在data里面
            return {
                info: "HelloVue!"
            }
        }
    })
    //将Vue实例挂载到某个元素上面(让Vue只管理这个元素以及内部的元素)
    app.mount('body>div');
</script>
</body>
</html>